<template>
  <view class="container">
    <!-- 背景图 -->
    <image 
      src="/static/background.png" 
      mode="aspectFill" 
      class="bg-image"
    />
    <view class="content">
      <!-- 主标签栏 -->
      <up-tabbar
        :value="value1"
        @change="handleTabChange" 
        :fixed="true"
      >
        <up-tabbar-item text="我的气象台" icon="home"></up-tabbar-item>
        <up-tabbar-item text="科普馆预约" icon="photo"></up-tabbar-item>
        <up-tabbar-item text="智慧气象" icon="grid" @click="toggleSubMenu"></up-tabbar-item>
      </up-tabbar>

      <!-- 二级菜单 - 无遮罩层 -->
      <view class="submenu-container" v-if="showSubMenu">
        <view class="submenu-item" @click="navigateTo('/pages/applicationCertificate/applicationCertificate')">
          <text>气象证明</text>
        </view>
        <view class="submenu-divider"></view>
        <view class="submenu-item" @click="navigateTo('/pages/trafficMeteorology/trafficMeteorology')">
          <text>交通气象</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref('');
const showSubMenu = ref(false);

const toggleSubMenu = () => {
  showSubMenu.value = !showSubMenu.value;
};

const handleTabChange = (e) => {
  let urlList = [
    "/pages/home/meteorological",
    "/pages/scienceMuseum/index",
    "" // 第三个菜单不直接跳转
  ]
  if(e !== 2) { // 排除智慧气象的点击
    showSubMenu.value = false;
    uni.navigateTo({
      url: urlList[e]
    });
  }
};

const navigateTo = (url) => {
  showSubMenu.value = false;
  uni.navigateTo({ url });
};
</script>

<style lang="scss">
.container {
  position: relative;
  width: 100vw;
  height: 100vh;  
  .bg-image {
    position: fixed;  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .content {
    position: relative; 
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

.submenu-container {
  position: fixed;
  bottom: 120rpx; /* 调整到tabbar上方 */
  right: 40rpx;
  width: 240rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.12);
  z-index: 999;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -16rpx;
    right: 40rpx;
    width: 0;
    height: 0;
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-top: 16rpx solid #fff;
  }
  
  .submenu-item {
    padding: 24rpx 32rpx;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    
    &:active {
      background-color: #f5f5f5;
    }
  }
  
  .submenu-divider {
    height: 1rpx;
    background-color: #eee;
  }
}
</style>